<template>
  <div class="container">
    <nav-bar :title="title" />
    <!-- <div class="top">
      <div v-for="(item,index) in topData" :key="'fans'+index" class="all">
        <div class="num">
          {{ item.num }}
        </div>
        <div>{{ item.title }}</div>
      </div>
    </div> -->

    <div v-if="lsitData.length>0" class="content">
      <div class="tit">直推粉丝</div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="onLoad"
      >
        <!-- <div class="list"> -->
        <div v-for="(item,index) in lsitData" :key="'zhi'+index" class="li" @click="to(item.id)">
          <div class="left">
            <img class="userAvator" :src="item.avatar" alt="">
            <div class="truename">{{ item.userRealName }}</div>
          </div>
          <div class="right">
            <!-- <div>
              <span>总粉丝：{{ item.fans }}</span>
            </div>
            <div>
              <span>黄金粉丝：{{ item.gold }}</span>
            </div>
            <div>
              <span>普通粉丝：{{ item.other }}</span>
            </div> -->
            <div class="tags" style="">
              <span>{{ item.userCash || 0 }}</span>
              <div style="margin-top: 10px;">采购补贴</div>
            </div>
            <div class="tags">
              <span>{{ item.userRecommendCash || 0 }}</span>
              <div style="margin-top: 10px;">推荐收益</div>
            </div>
            <div class="tags">
              <span>{{ item.userPoint || 0 }}</span>
              <div style="margin-top: 10px;">积分收益</div>
            </div>
          </div>
        </div>
        <!-- </div> -->
      </van-list>

    </div>
    <van-empty v-else description="暂无数据" />
  </div>
</template>
<script>
import { getFansList } from '@/api/fans'
export default {
  name: 'FansNum',
  components: {

  },
  data() {
    return {
      title: '粉丝列表',
      loading: true,
      finished: false,
      topData: [
        {
          title: '总粉丝',
          num: 100
        },
        {
          title: '黄金粉丝',
          num: 30
        },
        {
          title: '普通粉丝',
          num: 70
        }
      ],
      lsitData: [
      ],
      page: 1,
      total: 1
    }
  },
  async created() {
    await this.init()
  },
  methods: {
    async init() {
      const res = await getFansList({ pageNum: this.page })
      console.log(res)
      const records = res.map.page?.records || []
      this.total = res.map.page.pages
      if (this.page == 1) {
        this.lsitData = records
      } else {
        records.forEach(item => {
          this.$set(this.lsitData, this.lsitData.length, item)
        })
      }
      if (records.length !== 10) {
        this.finished = true
      } else {
        this.finished = false
      }
      // this.finished = true
      this.loading = false
    },
    to(id) {
      this.$router.push('/fans/' + id)
    },
    onLoad() {
      if (this.page < this.total) {
        this.loading = true
        this.finished = false
        this.page++
        this.init()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
  .container{
    box-sizing: border-box;
    background-color: #f6f6f6;
    // padding: 24px;
    .top{
      box-sizing: border-box;
      margin: 0 24px;
      padding: 24px;
      margin-top: 20px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .all{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .num{
          margin-bottom: 20px;
        }
      }
    }

    .content{
      margin: 0 24px;
      margin-top: 30px;
      .tit{
        font-size: 30px;
        font-weight: 600;
      }
      // .list{

        .li{
          display: flex;
          align-items: center;
          justify-content: space-between;
          background-color: #fff;
          padding: 24px;
          margin-top: 24px;
          border-radius: 10px;
          .left{
            width: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .userAvator{
              width: 50px;
              height: 50px;
              border-radius: 50%;
              margin-bottom: 5px
            }
          }
          .right{
            width: 510px;
            display: flex;
            // grid-row: auto;
            align-items: center;
            justify-content: space-between;
            text-align: left;
            font-size: 22px;
          }
          .right div{
            width: 170px;
          }
        }
      }
    // }
    .tags{
      width: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }

</style>
